<template>
  <div>
    <div>
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        drag
        action="#"
        :http-request="onUpload"
        auto-upload
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!-- <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
      </el-upload>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />

      <!-- <div>
        {{ archiveeId }}
        {{ tableData }}
      </div> -->
      <p></p>
      <p></p>

      <el-table v-loading="loading" :data="tableData" stripe border size="small">
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column label="名称" key="fileName" prop="fileName">
          <template slot-scope="scope">
            <el-button type="text" @click="downit(scope.row)">{{
              scope.row.fileName
            }}</el-button>
          </template>
        </el-table-column>

        <el-table-column label="上传时间" align="center" key="ctime" prop="ctime" />

        <el-table-column label="大小" align="center" key="fileSize" prop="fileSize">
          <template slot-scope="scope">
            {{ formattedFileSize(scope.row.fileSize) }}
          </template>
        </el-table-column>

        <!-- <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-postcard"
              @click="handleDetail(scope.row)"
              >详细信息</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import document from "./document.vue";
import { archiveeService } from "@/api/sysService";
export default {
  props: ["archiveeId"],
  components: {
    document,
  },
  data() {
    return {
      loading: false,
      total: 0,
      // 用户表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        page: 1,
        size: 5,
      },
    };
  },

  created() {
    this.getList();
  },
  methods: {
    downit(item) {
      window.open("/api/api/upload/" + item.filePath);
    },
    formattedFileSize(size = 0) {
      // let size = this.fileSize;
      if (size < 1024) {
        return `${size} B`;
      } else if (size < 1024 * 1024) {
        return `${(size / 1024).toFixed(2)} KB`;
      } else if (size < 1024 * 1024 * 1024) {
        return `${(size / (1024 * 1024)).toFixed(2)} MB`;
      } else {
        return `${(size / (1024 * 1024 * 1024)).toFixed(2)} GB`;
      }
    },
    onUpload(obj) {
      let formdata = new FormData();
      formdata.append("file", obj.file);
      formdata.append("archiveeId", this.archiveeId);

      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      archiveeService
        .postUpload(formdata, this.archiveeId)
        .then((_) => {
          // this.refreshIt();
          this.getList();
          loading.close();
          this.$message({
            type: "success",
            message: "上传成功",
          });
        })
        .catch((_) => {
          loading.close();
        });
    },
    getList() {
      archiveeService
        .listAttachment({ ...this.queryParams, archiveeId: this.archiveeId })
        .then((res) => {
          console.log(res);
          this.tableData = (res.data.data || []).map((el) => el.attachment || {});
          this.total = res.data.total;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
